<template>
	<div id="product">
		<div class="serach-form">
			<el-input size="mini" style="width: 200px;margin-right: 10px;" v-model="options[0].label"
				placeholder="请输入商品名称"></el-input>
			<el-select  size="mini" style="width: 200px;margin-right: 10px;" v-model="search_from.select_value1" placeholder="请选择">
				<el-option v-for="(item,index) in options" :key="item.value" :label="item.label":value="item.value">	
				</el-option>
			</el-select>
			<el-select size="mini" style="width: 200px;margin-right: 10px;" v-model="search_from.select_value2" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label":value="item.value">
				</el-option>
			</el-select>
			<span :name="hehe"></span>
			<span :name="getName"></span>
			<el-button size="mini" @click="search" type="success">搜索</el-button>
			<el-button size="mini" @click="add" type="success">添加</el-button>
			<el-table height="550px" size="mini" :data="tableData" border style="width: 100%">
				<el-table-column  prop="date" label="日期" width="180">
				</el-table-column>
				<el-table-column  prop="name" label="姓名" width="180">
				</el-table-column>
				
				<el-table-column label="头像" width="180">
					<template slot-scope="scope">
					<el-image 
				    style="width: 50px; height: 50px ;border: 100%;" 
				    :src="scope.row.avatar" 
				    :preview-src-list="srcList">
				  </el-image>
				</template>
				</el-table-column>
				<el-table-column  prop="address" label="地址">
				</el-table-column>
			<el-table-column
			      fixed="right"
			      label="操作"
			      width="100">
			      <template slot-scope="scope">
			        <el-button @click="handleclick(scope.row)" type="text" size="small">查看</el-button>
			        <el-button @click="edit(scope.row)"type="text" size="small" slot="reference">编辑</el-button>
			      </template>  <!-- 插槽 （动态修改内容）-->
				
			    </el-table-column>
			</el-table>
			</div>
			<div><el-pagination style="display: flex;justify-content: center;margin-top: ;" background
										layout="prev, pager, next" :total="15">
									</el-pagination></div>
									<el-dialog
									  title="提示"
									  :close-on-click-modal ="false"
									  :close-on-press-escape="false"
									  :visible.sync="dialogVisible"
									  width="60%">
									 <el-form  :model="form" :rules="rules" ref="form" label-width="80px">
									  <el-form-item label="姓名" prop="name">
									    <el-input v-model="chooseItem.name"></el-input>
									  </el-form-item>
									  <el-form-item label="时间" prop="date">
									   <el-date-picker format="yyyy-MM-dd" v-model="form.date" type="date" placeholder="选择日期"></el-date-picker>
									  </el-form-item>
									  <el-form-item label="地址" prop="address">
									    <el-cascader style="width: 400px;" v-model="form.address" :options="addressList"></el-cascader>
									  </el-form-item>
									   <el-form-item>
										   <el-button type="primary" @click="handleEdit">修改</el-button>
										   <el-button @click="dialogVisible=false">取消</el-button>
										    </el-form-item>
									   
									 </el-form>
									</el-dialog>
						
							</div>
						</template>
		<script>
import { Header } from 'element-ui';

				export default {
					select_value1:null,
					name: "product",
					data() {
						return {
							form:{
								name:"",
								date:"",
								address:""
							},
							rules:{
								name: [
								            { required: true, message: '请输入姓名', trigger: 'blur' },
									]
							},
							addressList:[{
									label:"内蒙古",
									value:1,
									children:[
										{
											label:"呼和浩特",
											value:2,
											children:[{
												label:"新城区",
												value:3,
											},{
												label:"赛罕区",
												value:3,
											},{
												label:"慧明区",
												value:3,
											}]
									
								}]
							}],
							tableData:[],
							dialogVisible:false,
							
			// <!-- 封装在一个里面-->
							search_from:{
								select_value1:null,
								select_value2:null,
								input: "",
							},
							options: [{
								label:"蛋糕",
								value:"0",
							},{
								label:"衣服",
								value:"1",
							},{
								label:"化妆品",
								value:"2",
							},{
								label:"呵呵",
								value:"3",
							},],
							chooseItem:{
								
							}
						}
					},
					methods: {
						async getTableData(){
						await this.$api.product.getMaternityList();
						
						},
						mounted(){
							this.getTableData();
						},
						edit(item){
							this.chooseItem=item;
							this.dialogVisible=true;
							
						},
						handleEdit(){
								this.$refs.form.validate((valid)=>{
									if(valid){
										this.dialogVisible = false;
									}else{
										this.$message({
										          message: '表单验证失败',
										          type: 'warning'
										        });
									}
									
						})},
						getName(type) {
							if (type == 1) {
								return "woashi1";
			
							} else {
								return "woshiqita"
							}
						},
						search() {
							let name = this.input;
							console.log(this.select-value1)
							console.log(name, "------");
						},
						add() {
							this.from = {name:"",date:"",address:""};
							this.dialogVisible = true;
						},
							getTableData(){
													// 发起网络请求 Ajax
												
													        const loading = this.$loading({
													          lock: true,
													          text: 'Loading',
													          spinner: 'el-icon-loading',
													          background: 'rgba(0, 0, 0, 0.7)'
													        });
													
													
													let data=[
														{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
														{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
														{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
														{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
														{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
											{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
											{date:"2025-05-21",name:"zzj",address:"内蒙古呼和浩特和林格尔盛乐",avatar:"http://gips1.baidu.com/it/u=436886321,1020119268&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"},
										];
										this.tableData =data
										 setTimeout(() => {
										          loading.close();
										        }, 2000);
									}
								},beforeCreate() {
			console.log("加载dom元素前");
		},
		created() {
			console.log("加载dom元素");
		},
		mounted() {
			// console.log("加载dom元素结束");
			this.getTableData();
		},
	}
</script>

<style lang="less" scoped>

</style>